<template>
    <div class="life">
        <p>{{msg}}</p>
        <button @click="changeF" >更新消息{{changeD}}次</button>
        <button @click="comFlag=!comFlag">挂在销毁组件</button>
        <v-subcom v-if="comFlag"></v-subcom>        
    </div>
</template>

<script>
import subCom from './subCom.vue';
export default {
    data () {
        return {
            msg: '声明周期函数演示组件',
            changeD: 0,
            comFlag: false
        }
    },
    components: {
        'v-subcom': subCom
    },
    methods: {
        changeF() {
            this.changeD++;
        }
    },
    beforeCreate(){
        console.log('life实例刚刚被创建');
        //alert('life实例刚刚被创建');
    },
    created(){
        console.log('life实例已经创建完成');
        //alert('life实例已经创建完成');
    },
    beforeMount(){
        console.log('life模板编译之前');
        //alert('life模板编译之前');
    },
    mounted(){     /*请求数据，操作dom,放在这个里面 mounted*/
        console.log('life模板编译完成');
        //alert('life模板编译完成');
    },
    beforeUpdate(){
        console.log('life第'+this.changeD+'次数据更新之前');
        //alert('life数据更新之前');
    },
    updated(){
        console.log('life第'+this.changeD+'次数据更新完毕');
        //alert('life数据更新完毕');
    },
    beforeDestroy(){   /*页面销毁的时候要保存一些数据，就可以监听这个销毁的生命周期函数*/
        console.log('life实例销毁之前');
        //alert('life实例销毁之前');
    },
    destroyed(){
        console.log('life实例销毁完成');
        //alert('life实例销毁完成');
    }
}
</script>

<style>
div.life{
    width: 400px;
    margin: 10px auto;
    padding: 10px 0;
}
</style>
